<template>
    <div class="head">
        <el-row>

            <el-col :span="8" class="btn-bread">

              <el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">
                <el-button type="primary" icon="el-icon-s-fold" class="elbtn" :label="flag" @click="onbtn"></el-button>
              </el-radio-group>

                <el-breadcrumb separator-class="el-icon-arrow-right">

                    <el-breadcrumb-item :to="{ path: '/' }"> <span class="nav-bread">管理中心 </span></el-breadcrumb-item>
                    <el-breadcrumb-item><span class="nav-bread">首页</span></el-breadcrumb-item>

                </el-breadcrumb>

            </el-col>
            <el-col :span="13">
                <h1>小优后台管理系统</h1>
            </el-col>
            <el-col :span="3">
                <a href="#"> 管理员登录</a>

            </el-col>
        </el-row>

    </div>
</template>

<script>
import vm from  '../utils/vm'
    export default {

        data() {
            return {
              flag:false
            }
        },
        created() {},
        methods: {
          onbtn(){
            this.flag = !this.flag
            vm.$emit("myevent",this.flag)
          }

        },
        components: {}
    }
</script>
<style scoped>
.btn-bread{
    display: flex;
  align-items: center;

}
.elbtn{
  margin-left: 20px;
  margin-right: 10px;
  box-sizing: border-box;

   width: 40px;
  height: 30px;
}
.head .nav-bread{
  color:white;
}
    .head {
        height: 60px;
        /* display: flex; */
        background-color: black;
        color: white;



    }

    .el-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 60px;






    }




</style>